<template>
	<div>
		<h1>首页</h1>
		 <div class="container">
			 <div class="left">
				 <el-row class="tac">
				 	<el-col :span="12">
				 		<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
				 			<el-submenu index="1">
				 				<template slot="title">
				 					<i class="el-icon-location"></i>
				 					<span>找UP主</span>
				 				</template>
				 				<el-menu-item-group>
									<router-link to="/home/search"><el-menu-item index="1-1">UP主检索</el-menu-item></router-link>
				 					<el-menu-item index="1-2">UP主排行</el-menu-item>
				 					<el-menu-item index="1-3">UP主对比</el-menu-item>
				 				</el-menu-item-group>
				 			</el-submenu>
				 		</el-menu>
				 	</el-col>
				 </el-row>
				 <el-row class="tac">
				 	<el-col :span="12">
				 		<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
				 			<el-submenu index="1">
				 				<template slot="title">
				 					<i class="el-icon-location"></i>
				 					<span>创意素材</span>
				 				</template>
				 				<el-menu-item-group>
				 					<el-menu-item index="1-1">视频搜索</el-menu-item>
				 					<el-menu-item index="1-2">商单视频</el-menu-item>
				 					<el-menu-item index="1-3">关键词分析</el-menu-item>
				 					<el-menu-item index="1-4">视频监控</el-menu-item>
				 					<el-menu-item index="1-5">话题搜索</el-menu-item>
				 				</el-menu-item-group>
				 			</el-submenu>
				 		</el-menu>
				 	</el-col>
				 </el-row>
			 </div>
			 <div class="content">
				 n内容区域
			 	<router-view></router-view>
			 </div>
		 </div>
	</div>
</template>
<script>
	export default {
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style>
	.container{
		width: 100%;
		height: 100vh;
		display: flex;
	}
	.container .left{
		width: 100px;
		background-color: #aaa;
	}
</style>